<template>
  <div class="giao">
    {{ count }}
    <div class="he"></div>
  </div>
  <div class="giao">
    {{ obj.name }}
  </div>
  <button @click="add">add</button>
  <button @click="changeObj">改变</button>

  <el-icon :size="20">
    <Edit />
  </el-icon>
  <el-icon color="#409EFC" class="no-inherit">
    <Share />
  </el-icon>
  <el-icon>
    <Delete />
  </el-icon>
  <el-icon class="is-loading">
    <Loading />
  </el-icon>
  <el-button type="primary">
    <el-icon style="vertical-align: middle">
      <Search />
    </el-icon>
    <span style="vertical-align: middle"> Search </span>
  </el-button>
</template>

<script lang="ts">
import { defineComponent, ref ,reactive} from "vue";

export default defineComponent({
  setup() {
    const count = ref(0);
    function add() {
      count.value++
      console.log(count);
      
    }
    const obj = reactive({
      name:"渣渣灰",
      sex:"男",
      mother:{
        giao:"fucker"
      }
    })
    function changeObj(){
      if(count.value%2 == 0){
        obj.name = "刘德华"
      }else{
        obj.name = "渣渣灰"
      }
    }

    const proxyGiao = new Proxy(obj,{
      get(target,prop){
        console.log("get");
        console.log(prop);
        return Reflect.get(target,prop)
      },
      set(target,prop,val){
        console.log("set");
        console.log(prop);
        return Reflect.set(target,prop,val)
      },
      deleteProperty(target,prop){
        console.log("delete");
        console.log(prop);
        return Reflect.deleteProperty(target,prop)
      }
    })
    proxyGiao.name = "彭于晏"
    console.log(proxyGiao.name);
    
    var a = {name:"giao",giao:{
      name:"hhh"
    }}
    var b = Object.assign({},a)
    var c = a
    var d = {...obj}
    console.log(a==b,a==c);
    

    return {
      count,
      add,
      obj,
      changeObj
    };
  },
});
</script>
<style scoped lang="scss">
  .giao{
    .he{
      width: 100px;
      height: 100px;
      background-color: aqua;
    }
  }
</style>
